<script setup>
import { ref } from 'vue'
import { getLoopData, delLoopData } from '../../api/loop'
const loopdata = ref([])
getLoopData()
  .then((res) => {
    loopdata.value = res.data.data
    console.log(res);
  })
function delData(id) {
  console.log(id);
  delLoopData({ id: id })
    .then((res) => {
      console.log(res);
      getLoopData()
        .then((res) => {
          loopdata.value = res.data.data
          console.log(res);
        })
    })

}
</script>
<template>
  <el-table :data="loopdata" style="width: 100%">
    <el-table-column label="序号" type="index" :index="1" />
    <el-table-column label="编号" prop="id" />
    <el-table-column label="图片">
      <template #default="scope">
        <img :src="scope.row.url" alt="">
      </template>
    </el-table-column>
    <el-table-column prop="alt" label="描述" width="180" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="delData(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<style scoped>
img {
  width: 100px;
  height: 100px;
}
</style>